<template>
  <div class="social-media-chart-container">
    <div class="social-media-info">
      <div class="platform-details">
        <div class="platform-title">Social Media Score</div>
        <div class="platform-review-count">7.65</div>
        <div class="platform-review-label">Score</div>
      </div>
      <!-- <div class="platform-switch">
        <div class="switch-label">Social media</div>
        <el-switch
          v-model="mediaSwitch"
          active-color="#2faa68"
          inactive-color="#ff4949"
          :width="45"
          active-text="on"
        >
        </el-switch>
      </div> -->
    </div>
    <div class="chart-container">
      <PieChart
        :option="optionAnnular1"
        :height="'1.4375rem'"
        :width="'4.1667rem '"
      ></PieChart>
    </div>
  </div>
</template>

<script>
import { fontChart } from "@/utils/echartPxToRem";
import PieChart from "@components/common/PieChart.vue";
export default {
  components: {
    PieChart,
  },
  data() {
    return {
      mediaSwitch: true,
      optionAnnular: {
        // 保持不变...
      },
      optionAnnular1: {
        tooltip: {
          trigger: "item",
        },
        // 关键修正：legend.data 的 name 必须与 series.data 的 name 完全一致
        legend: [
          {
            orient: "vertical",

            left: "0%", // 使用百分比定位
            top: "50%",

            itemWidth: fontChart(16),
            itemHeight: fontChart(16),
            itemGap: fontChart(7),
            formatter: (name) => {
              // 1. 找到当前图例对应的数据源
              const item = this.optionAnnular1.series[0].data.find(
                (dataItem) => dataItem.name === name
              );
              if (!item) return name;

              // 2. 计算总数据和
              const total = this.optionAnnular1.series[0].data.reduce(
                (sum, dataItem) => sum + dataItem.value,
                0
              );
              if (total === 0) return name;

              // 3. 计算百分比（保留1位小数）
              const percent = ((item.value / total) * 100).toFixed(1);

              // 4. 拼接格式：名称 + 值 + 百分比（使用 rich 样式区分）
              return `${name}  {valueStyle|${item.value}}  {percentStyle|(${percent}%)}`;
            },
            textStyle: {
              color: "#454545",
              fontSize: fontChart(12), // name 的字体大小（普通字重）
              rich: {
                valueStyle: {
                  fontWeight: "bold", // 数字加粗
                  fontSize: fontChart(12), // ✅ 正确：数字的字体大小（比 name 大1px，抵消加粗的紧凑感）
                },
              },
              padding: [0, 0, 0, fontChart(4)],
            },
            data: [
              {
                name: "YouTube",
                icon: "image://" + require("@/assets/pieIcon/YouTube1.png"),
                textStyle: { color: "#454545" },
              },
              {
                name: "Reddit",
                icon: "image://" + require("@/assets/pieIcon/Reddit1.png"),
                textStyle: { color: "#454545" },
              },
              {
                name: "TikTok",
                icon: "image://" + require("@/assets/pieIcon/TikTok1.png"),
                textStyle: { color: "#454545" },
              },
            ],
          },
          {
            orient: "vertical",

            left: "30%", // 使用百分比定位
            top: "50%",
            itemWidth: fontChart(16),
            itemHeight: fontChart(16),
            itemGap: fontChart(7),
            formatter: (name) => {
              // 1. 找到当前图例对应的数据源
              const item = this.optionAnnular1.series[0].data.find(
                (dataItem) => dataItem.name === name
              );
              if (!item) return name;

              // 2. 计算总数据和
              const total = this.optionAnnular1.series[0].data.reduce(
                (sum, dataItem) => sum + dataItem.value,
                0
              );
              if (total === 0) return name;

              // 3. 计算百分比（保留1位小数）
              const percent = ((item.value / total) * 100).toFixed(1);

              // 4. 拼接格式：名称 + 值 + 百分比（使用 rich 样式区分）
              return `${name}  {valueStyle|${item.value}}  {percentStyle|(${percent}%)}`;
            },
            textStyle: {
              color: "#454545",
              fontSize: fontChart(12), // name 的字体大小（普通字重）
              rich: {
                valueStyle: {
                  fontWeight: "bold", // 数字加粗
                  fontSize: fontChart(12), // ✅ 正确：数字的字体大小（比 name 大1px，抵消加粗的紧凑感）
                },
              },
              padding: [0, 0, 0, fontChart(4)],
            },
            data: [
              {
                name: "Instagram",
                icon: "image://" + require("@/assets/pieIcon/Instagram1.png"),
                textStyle: { color: "#454545" },
              },
              {
                name: "X",
                icon: "image://" + require("@/assets/pieIcon/X1.png"),
                textStyle: { color: "#454545" },
              },
              {
                name: "LinkedIn",
                icon: "image://" + require("@/assets/pieIcon/LinkedIn1.png"),
                textStyle: { color: "#454545" },
              },
            ],
          },
        ],
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["26%", "90%"],
            center: ["75%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "inside",
              formatter: function (params) {
                const percent = params.percent;
                const name = params.name;
                // 直接使用名称作为图标标识符
                return `{icon_${name}|}\n{percentStyle|${percent}%}`;
              },
              distance: 0, // 调整标签与饼图边缘的距离
              padding: [0, 0, 0, 0], // 调整标签内边距
              rich: {
                // 为每个平台定义图标，确保路径正确
                icon_YouTube: {
                  backgroundColor: {
                    image: require("@/assets/pieIcon/YouTube.png"), // 确保文件存在
                  },
                  width: fontChart(21),
                  height: fontChart(16),
                  align: "center",
                },
                icon_Reddit: {
                  backgroundColor: {
                    image: require("@/assets/pieIcon/Reddit.png"),
                  },
                  width: fontChart(16),
                  height: fontChart(16),
                  align: "center",
                },
                icon_TikTok: {
                  backgroundColor: {
                    image: require("@/assets/pieIcon/TikTok.png"), // 确保文件存在
                  },
                  width: fontChart(16),
                  height: fontChart(16),
                  align: "center",
                },
                icon_Instagram: {
                  backgroundColor: {
                    image: require("@/assets/pieIcon/Instagram.png"), // 确保文件存在
                  },
                  width: fontChart(16),
                  height: fontChart(16),
                  align: "center",
                },
                icon_X: {
                  backgroundColor: {
                    image: require("@/assets/pieIcon/X.png"), // 确保文件存在
                  },
                  width: fontChart(16),
                  height: fontChart(16),
                  align: "center",
                },
                icon_LinkedIn: {
                  backgroundColor: {
                    image: require("@/assets/pieIcon/LinkedIn.png"), // 确保文件存在
                  },
                  width: fontChart(16),
                  height: fontChart(16),
                  align: "center",
                },

                // 其他平台图标类似配置...
                percentStyle: {
                  padding: [0, 0],
                  width: fontChart(25),
                  height: fontChart(25),
                  align: "center",
                  verticalAlign: "middle",
                  fontSize: fontChart(12),
                  color: "#fff",
                },
              },
            },
            itemStyle: {
              borderWidth: fontChart(2),
              borderColor: "#fff",
            },
            emphasis: {
              scale: false,
              label: {
                show: true,
                fontSize: fontChart(40),
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 300, // 占比 25%（最大）
                name: "YouTube",
                itemStyle: { color: "#A601F1" },
              },
              {
                value: 120, // 占比 10%（最小）
                name: "Reddit",
                itemStyle: { color: "#A563EA" },
              },
              {
                value: 240, // 占比 20%
                name: "TikTok",
                itemStyle: { color: "#BD8DF0" },
              },
              {
                value: 150, // 占比 12.5%
                name: "Instagram",
                itemStyle: { color: "#D7B1F0" },
              },
              {
                value: 180, // 占比 15%
                name: "X",
                itemStyle: { color: "#CA9DFA" },
              },
              {
                value: 210, // 占比 17.5%
                name: "LinkedIn",
                itemStyle: { color: "#8001BE" },
              },
            ],
          },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.social-media-chart-container {
  position: relative;
  background: #fff;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  // width: 3.8958rem;
  height: 1.9583rem;
  border-radius: 0.0556rem;
  border: 1px solid #cdcccc;

  .social-media-info {
    width: 1.875rem;
    height: 1.7708rem;
    margin: 24px 45px 32px 24px;

    .platform-details {
      margin-bottom: 32px;

      .platform-title {
        font-size: 0.1389rem;
        font-weight: 600;
        margin-bottom: 16px;
        color: #454545;
      }

      .platform-review-count {
        font-size: 0.1667rem;
        font-weight: 700;
        color: #232323;
        margin-bottom: 3px;
      }

      .platform-review-label {
        font-size: 0.0694rem;
        font-weight: 400;
        color: #454545;
      }
    }

    .platform-switch {
      display: flex;
      justify-content: space-between;

      .switch-label {
        font-size: 0.0972rem;
        font-weight: 600;
        color: #6a6969;
        // margin-right: 124px;
        // width: 0.5833rem;
      }

      // 新增的样式，用于调整 el-switch 的文字位置
      .el-switch {
        display: flex;
        align-items: center;
        justify-content: center;
        .el-switch__core {
          // 确保开关按钮内的文字也能正确居中
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  .chart-container {
    position: absolute;
    top: 18px;
    left: 0;
    margin: 37px 24px;
    box-sizing: border-box;
  }
}
</style>
